<template>
    <div class="content settle-sub-box" v-loading="loading">
        <div class="box full">
            <breadcrumb :title="'患者详情'" @back="upload">
                <el-button type="primary" v-if="!state || state!=1" @click="discharge">办理出院</el-button>
            </breadcrumb>
            <div class="line">基本信息</div>
            <div class="info-form">
                <div>
                    <div class="item">
                        <span class="label">床位号：</span>
                        <span class="value">{{detail.sickbedNumber}}</span>
                    </div>
                    <div class="item">
                        <span class="label">住院号：</span>
                        <span class="value">{{detail.admissionNumber}}</span>
                    </div>
                    <div class="item">
                        <span class="label">陪护人数：</span>
                        <span class="value">
                            <template v-if="!edit">{{detail.escorNumber}}</template>
                            <template v-if="edit">
                                <el-input-number :min="0" :max="10" :precision="0" size="mini" :controls="false"
                                                 @blur="changeNumber()"
                                                 placeholder="请输入人数" v-model="detail.escorNumber" class="num">
                                </el-input-number>
                            </template>
                        </span>
                    </div>
                    <el-link type="primary" :underline="false" @click="changeEdit" v-if="!state || state!=1">
                        {{edit?'完成':'修改'}}
                    </el-link>
                </div>
                <div>
                    <div class="item">
                        <span class="label">姓名：</span>
                        <span class="value">{{detail.name}}</span>
                    </div>
                    <div class="item">
                        <span class="label">手机号：</span>
                        <span class="value">{{detail.phone}}</span>
                    </div>
                </div>
            </div>
            <div class="line">陪护人员</div>
            <div class="accompany">
                <div v-for="(item, index) in escortList" :key="index">
                    <div class="name">姓名：{{item.name}}</div>
                    <div class="name">手机号：{{item.phone}}</div>
                </div>
                <div class="empty" v-if="!escortList[0]">暂无关联的陪护人员</div>
            </div>
            <div class="line">探视记录</div>
            <table-example ref="table" :data="tableData" :tableColumn="header"
                           :slotColumns="slotColumns">
                <template slot="operation" slot-scope="scope">
                    <div class="operation">
                        <el-link type="primary" :underline="false">同意</el-link>
                        <el-link type="primary" class="error" :underline="false">拒绝</el-link>
                    </div>
                </template>
            </table-example>
            <page :data="page" @jumpPage="getList" class="mt20"></page>
        </div>
    </div>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import breadcrumb from '../components/breadcrumb'

    export default {
        data() {
            return {
                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '探视人',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'phone',
                        label: '探视人手机号',
                        minWidth: '120',
                        align: 'center'
                    },
                    {
                        prop: 'visitTime',
                        label: '探视时间',
                        align: 'center',
                        minWidth: '180'
                    },
                    {
                        prop: 'practicalStartTime',
                        label: '到院时间',
                        align: 'center',
                        minWidth: '150'
                    },
                    {
                        prop: 'practicalEndTime',
                        label: '离院时间',
                        align: 'center',
                        minWidth: '150'
                    }
                ],
                slotColumns: [],
                page: {},
                index: 1,
                loading: false,
                detail: {}, // 患者详情
                id: '',
                state: '', // 出院状态
                escortList: [], // 陪护人员列表
                edit: false // 人数是否正在编辑
            }
        },
        mounted() {
            if (this.$route.query.id) this.id = this.$route.query.id
            if (this.$route.query.state) this.state = this.$route.query.state
            this.getDetail()
            this.getList()
            this.getEscortList()
        },
        methods: {
            getDetail() {
                this.$http.get('/patient/patienDetails', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.detail = result.data
                    }
                })
            },
            getEscortList() {
                this.$http.get('/patient/patienEscortList', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.escortList = result.data
                    }
                })
            },
            // 获取探视记录列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/patient/patienVisitPage', {
                    id: this.id,
                    current: this.index || 1,
                    size: 10
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 修改陪护人数
            changeEdit() {
                let _this = this
                if (!this.edit) {
                    this.edit = !this.edit
                } else {
                    this.loading = true
                    this.$http.post('/patient/updPatienEscorRule?id=' + this.id + '&value=' + this.detail.escorNumber).then(result => {
                        this.loading = false
                        if (result.success) {
                            _this.$message.success({
                                message: '修改成功。',
                                showClose: true
                            })
                            _this.edit = false
                        }
                    }).catch(() => {
                        this.loading = false
                    })
                }
            },
            // 办理出院
            discharge() {
                let _this = this
                this.$method.messageBox('confirm', '确定办理出院吗？', (action, instance) => {
                    if (action === 'confirm') {
                        _this.loading = true
                        _this.$http.post('/patient/patienDischarge?id=' + _this.id).then(result => {
                            if (result.success) {
                                _this.state = 1
                                _this.loading = false
                            }
                        })
                    }
                }, '', false, false)
            },
            upload() {
                this.$emit('upload')
            },
            changeNumber() {
                if (!this.detail.escorNumber) this.detail.escorNumber = 0
            }
        },
        components: {
            tableExample,
            page,
            breadcrumb
        }
    }
</script>

<style scoped lang="less">
    .content {
        background-color: #fff;
    }

    .box {
        padding: 30px;
    }

    .line {
        line-height: 22px;
        font-size: 16px;
        font-weight: bolder;
        padding: 0 12px;
        margin: 20px 0;
        position: relative;

        &:before {
            content: '';
            position: absolute;
            top: 10%;
            left: 0;
            width: 3px;
            height: 80%;
            background-color: #428CFF;
            border-radius: 3px;
            box-shadow: 0 0 3px 0 #428CFF;
        }
    }

    .info-form {
        > div {
            margin-bottom: 10px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .item {
            line-height: 40px;
            display: inline-block;
            min-width: 210px;
            padding-right: 10px;

            .label {
                color: #999;
            }

            .num {
                width: 110px;
            }
        }
    }

    .accompany {
        padding: 2px;
        display: flex;
        flex-flow: wrap;
        margin: 0 -20px -20px 0;

        > div {
            box-shadow: 0 0 6px -1px rgba(0, 0, 0, .2);
            padding: 15px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            min-width: 200px;
            margin: 0 20px 20px 0;
            line-height: 28px;
        }

        .empty {
            line-height: 56px;
            box-shadow: none;
            color: #999;
        }
    }
</style>
